<template>
  <view class="ai-input-wrapper" :class="{'no-border': !showBorder}">
    <input class="ai-input"
      :class="[variantClass]"
      :cursor-spacing="12"
      :placeholder="placeholder"
      :maxlength="maxLength"
      @blur="handleBlur"
      @input="inputHandler" />
  </view>
</template>

<script>
  /**
   * Input 输入框
   * @description 表单中的输入框组件
   * @property {String} value 输入框内容
   * @property {String} placeholder 占位符
   * @property {Number} maxLength 最大长度
   * @event {Function} change 输入变化时触发事件
   * @example <ai-input value="abc"></ai-input>
   */
  export default {
    name: "ai-input",
    emits: ['update:value', 'change'],
    props: {
      value: String,
      placeholder: {
        type: String,
        default: ""
      },
      maxLength: {
        type: Number,
        default: 150
      },
      showBorder: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        // 'outline' | 'filled' | 'flushed'
        variant: "outline",
        focus: false,
      };
    },
    computed: {
      variantClass: {
        get: function() {
          let v = this.variant
          return `ai-input--${v}`
        }
      },
    },
    methods: {
      inputHandler(e) {
        // const query = uni.createSelectorQuery().in(this)
        // const nodesRef = query.select('.ai-input-wrapper')
        // console.log(nodesRef)
        // nodesRef.fields({rect: true}, d => {
        //   console.log("ddd:", JSON.stringify(d))
        // }).exec()
        const targetValue = e.detail.value
        this.$emit('update:value', targetValue)
        this.$emit('change', targetValue)
      },
      handleBlur() {
        this.$nextTick(() => {
          this.focus = false
        })
      },
      focused() {
        this.focus = true
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  uni-textarea {
    height: auto;
  }

  .ai-input-wrapper {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: $input-width;
    //min-height: $input-min-height;
    margin: $input-margin;
    padding: $input-padding;
    border: $input-border;
    border-radius: $input-border-radius;
    font-family: $input-font-family;
    font-size: $input-font-size;
    background: $input-bg;

    //line-height: $input-line-height;
    &.no-border {
      border: 0
    }

    &:hover {
      outline: none;
      border-color: var(--brand-1);
    }

    // &.has-counter {
    //   padding-bottom: 20px;

    //   &+.HelpText {
    //     margin-top: -20px;
    //   }
    // }
  }

  .ai-input {
    display: block;
    box-sizing: border-box;
    width: $input-width;
    //min-height: $input-min-height;
    // margin: $input-margin;
    // padding: $input-padding;
    // border: $input-border;
    // border-radius: $input-border-radius;
    font-family: $input-font-family;
    font-size: $input-font-size;
    // line-height: $input-line-height;
    color: $input-color;
    background: $input-bg;
    //resize: $input-resize;
    -webkit-tap-highlight-color: transparent;
    transition: .2s ease-in-out;
    -webkit-appearance: none;

    &::placeholder {
      color: var(--gray-4);
    }

    &--filled {
      border-color: transparent;
      background-color: var(--gray-6);
    }

    &--flushed {
      padding: 2px var(--gutter);
      border-width: 0 0 1px;
      border-radius: 0;
      background: none;

      &:focus {
        box-shadow: var(--brand-1) 0px 1px 0px 0px;
      }
    }
  }  

</style>